	$passedColor: #666;
.activity {
		background: rgba(243,162,152,0.2);
		min-height: 100vh;
	}

	.head-bg {
		width: 100%;
		height: 610rpx;
		top: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.info,
	.rule {
		padding: 0 30rpx;
		background-color: #fff;
		@extend .flex-btw;
		flex-direction: column;
		margin: 0 25rpx;
		margin-top: 50rpx;
		border-radius: 30rpx;

		.title {
			position: relative;
			@extend .flex-center;
			padding: 0 100rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin-bottom: 82rpx;

			image {
				width: 100%;
				height: 70rpx;
				position: absolute;
			}

			.content {
				position: relative;
				color: #FFF;
			}
		}
	}

	.rule {
		padding: 0 42rpx 42rpx 42rpx;

		.title {
			margin-bottom: 42rpx;
		}

		.detail {
			width: 100%;
		}
	}
	.task{
		.title{
			margin-bottom: 44rpx;
		}
		.name{
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			display: block
		}
		.group{
			width: 484rpx;
			margin-top: 30rpx;
			margin-bottom: 50rpx;
			white-space: nowrap;
			&.little{
				display: grid;
				grid-template-columns: repeat(3, 33%);
				justify-content: space-between;
				align-items: center;
			}
			.item{
				width: 99rpx;
				height: 99rpx;
				margin: 0 auto;
				@extend .flex-center;
				border-radius: 50%;
				color: #EE514C;
				border: 1px solid #EE514C;
				background-color: transparent;
				&::after{
					border: none;
				}
			}
			.more{
				width: 100%;
				display: block;
				.item{
					margin-right: 44rpx;
					min-width: 99rpx;
					min-height: 99rpx;
					display: inline-block;
					text-align: center;
					line-height: 99rpx;
					overflow: hidden;
					&.has-person{
						border: none;
					}
					.avatar{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}
		.prize{
			width: 528rpx;
			height: 120rpx;
			background-color: #FCF2E2;
			margin: 42rpx auto;
		}
		.btns{
			@extend .flex-btw;
			margin-bottom: 50rpx;
			.reset-btn,
			.share-btn,
			.recive-btn{
				padding: 20rpx 50rpx;
				border-radius: 50rpx;
			}
			.reset-btn{
				color: #EE514C;
				border:1px solid #EE514C;
				margin-right: 22rpx;
				white-space: nowrap;
			}
			.share-btn,
			.recive-btn{
				padding: 22rpx 60rpx;
				background: linear-gradient(to right, #FFBC67, #FC602B);
				border-radius: 50rpx;
				color: #FFF;
				line-height: normal;
				font-size: 32rpx;
				border: none;
			}
			.recive-btn{
				width: 580rpx;
				@extend .flex-center;
			}
		}
	}
	.info{
		.coupons{
			width: 100%;
			margin-bottom: 50rpx;
			.list{
				display: grid;
				grid-template-columns: repeat(auto-fit, 33%);
				grid-column-gap: 10rpx;
				min-height: 280rpx;
				justify-content: center;
				align-items: center;
				.coupon{
					transform: scale(.9);a
					&.checked{
						transform: scale(1);
					}
				}
			}
			.coupon{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				border: 4rpx solid #999999;
				@extend .flex-center;
				flex-direction: column;
				font-size: 20rpx;
				color: #999999;
				box-sizing: border-box;
				transition: all linear .2s;
				position: relative;
				padding: 20rpx;
				padding-top: 64rpx;
				&.checked{
					border-color: #EE514C;
				}
				.checked-icon{
					position: absolute;
					right: 6rpx;
					top: 6rpx;
				}
				.name{
					margin: 30rpx 0 23rpx 0;
					font-size: 24rpx;
					font-weight: bold;
					color: #333333;
					text-align: center;
				}
				image{
					width: 92rpx;
					height: 92rpx;
				}
			}
		}
		.remark{
			font-size: 32rpx;
			color: #333333;
			.num{
				font-weight: bold;
				color: #EE514C;
				font-size: 32rpx;
			}
		}
		.start-btn{
			margin: 30rpx 0 50rpx 0;
			border-radius: 100rpx;
			padding: 24rpx;
			@extend .flex-center;
			background: linear-gradient(to right, #FFBC67, #FC602B);
			width: 100%;
			font-size: 32rpx;
			color: #FFF;
			font-weight: bold;
		}
	}
	.coupon-select {
			background-color: #FCF2E2;
			border-radius: 10rpx;
			@extend .flex-btw;
			height: 120rpx;
			width: 528rpx;
			margin: 42rpx 0;
			.name{
				text-align: left;
				flex: 1;
				margin-left: 16rpx;
				font-size: 36rpx;
				color: #666666;
				.num{
					color: #EE514C;
				}
			}
			.number {
				@extend .flex-center;
				flex-direction: column;
				border-right: 1px dashed #999999;
				position: relative;
				height: 100%;
				width: 140rpx;
				image{
					width: 78rpx;
					height: 78rpx;
				}
	
				&::before,
				&::after {
					content: "";
					width: 30rpx;
					height: 30rpx;
					background-color: #fff;
					position: absolute;
					right: -15rpx;
					border-radius: 50%;
				}
	
				&::before {
					top: -15rpx;
				}
	
				&::after {
					bottom: -15rpx;
				}
			}
	
		}
